<template>
  <div class="appearance-setting">
    <setting-card-wrapper title="显示">
      <setting-card-item title="主题">
        <div class="theme-list">
          <div
            class="theme-item"
            @click="changeThemeType('light')"
            :class="{ 'theme-item-active': currentThemeType === 'light' }"
          >
            <img :src="bg" alt="" />
            <div class="name">浅色</div>
          </div>
          <div
            class="theme-item"
            @click="changeThemeType('dark')"
            :class="{ 'theme-item-active': currentThemeType === 'dark' }"
          >
            <img :src="bg" alt="" />
            <div class="name">深色</div>
          </div>
          <div
            class="theme-item"
            @click="changeThemeType('auto')"
            :class="{ 'theme-item-active': currentThemeType === 'auto' }"
          >
            <img :src="bg" alt="" />
            <div class="name">自动</div>
          </div>
        </div>
      </setting-card-item>
      <setting-card-item title="强调色" :border="false">
        <div class="color-list">
          <div
            class="color-item"
            v-for="color in colors"
            :key="color"
            :style="{ backgroundColor: color }"
            @click="changePrimaryColor(color)"
          ></div>
        </div>
      </setting-card-item>
    </setting-card-wrapper>
  </div>
</template>

<script lang="ts" setup>
import bg from "@/assets/wallpaper/bg.jpg"
import { useThemeStore } from "@/stores/theme"
import VariableName from "@/stores/theme/variable-name"
import SettingCardWrapper from "@/application/theme-setting/components/setting-card/SettingCardWrapper.vue"
import SettingCardItem from "@/application/theme-setting/components/setting-card/SettingCardItem.vue"

const colors = [
  "#ff6b6b",
  "#f06595",
  "#cc5de8",
  "#845ef7",
  "#5c7cfa",
  "#339af0",
  "#22b8cf",
  "#20c997",
  "#51cf66",
  "#94d82d",
  "#fcc419",
  "#ff922b"
]

const themeStore = useThemeStore()
const currentThemeType = themeStore.getVariableRef(VariableName.Theme.type)


function changeThemeType(value: string) {
  themeStore.setVariable(VariableName.Theme.type, value)
}

function changePrimaryColor(value: string) {
  themeStore.setVariable(VariableName.Theme.primaryColor, value)
}
</script>

<style scoped lang="scss">
.appearance-setting {
  padding: 0.2rem 0.1rem;

  .setting-card {
    .setting-card-item {
      align-items: flex-start;

      .content {
        .theme-list {
          display: flex;
          align-items: center;
          justify-content: space-around;

          .theme-item {
            margin: 0 0.05rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            .name {
              font-size: 0.12rem;
            }

            img {
              width: 0.7rem;
              height: 0.5rem;
              border-radius: 7px;
            }
          }

          .theme-item-active {
            .name {
              color: var(--primary-color);
              font-weight: bold;
            }

            img {
              border: 2px solid var(--primary-color);
            }
          }
        }

        .color-list {
          display: flex;
          align-items: center;
          justify-content: space-around;

          .color-item {
            height: 0.15rem;
            width: 0.15rem;
            margin: 0 0.05rem;
            border-radius: 50%;
          }

          .color-item-active {
            border: 2px solid var(--primary-color);
          }
        }
      }
    }
  }
}
</style>
